{%extends "other/base.html" %}
{% load comments_tags %}
{% load myfilters_and_tags %}
{% load staticfiles %}

{% block csslink %}
    <!--自定义md代码高亮-->
    <link rel="stylesheet" type="text/css" href="/static/css/md/default.css">
    <!--自定义md样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/md/md.css">
    <link rel="stylesheet" href="{% static 'css/article_detail.css' %}">
{% endblock %}

{% block title %} {{article.title}} {% endblock %}



{% block css %}
<style type="text/css">

</style>
{% endblock %}


{% block content %}
<!-- 文章-->
<div class="arcicle">
    <div class="arcicle-address">
        <a href="{% url 'blog:index' %}" class="iconfont">&#xe612;</a>
        <small>></small>
        <a href="/category/{{article.category.bigcategory.slug}}/">{{article.category.bigcategory.name}}</a>
        <span>></span>
        <a href="/category/{{article.category.bigcategory.slug}}/{{article.category.slug}}/">{{article.category.name}}</a>
        <small>></small>
        <span>{{article.title}}</span>
    </div>
    <h1 class="arcicle-title text-center">
        <a href="">{{article.title}}</a>
    </h1>
    <div class="infom text-center">
        <span>{{article.created_time | date:"Y-m-j"}}</span>
        <small>&#32;•&#32;</small>
        <span>{{article.views}}&#32;阅读</span>
        <small>&#32;•&#32;</small>
        <span>
             <a href="{{ article.get_abstruct_url }}#comment-area">{{ article.comment_set.count }} 评论</a>
        </span>
    </div>
    <div id="markdown">
        {{article.body|safe}}
    </div>
    <div class=" afterbody ">

        <div class="reward">
            <button type="button" class="btn btn-info center-block" data-toggle="modal" data-target="#Reward ">赞赏支持</button>
        </div>
        <div class="arcicletag">
            <span class="iconfont" >&#xe62b;</span>
            {% get_article_tag article.id as tags%}
            {% for tag in tags %}
                <a href="/tags/{{tag.name}}/" class="tag-icon label label-default">#{{tag.name}}</a>
            {% endfor%}
        </div>
    </div>
    <div class=" Pagedu">
        {% get_article_previous article.id as article_previous%}
        <a style="position: absolute;left: 25px;" href="/article/detail/{{article_previous.pk}}">
            <p><span class="iconfont">&#xe7a7;</span> {{article_previous.title}}</p>
        </a>
        {% get_article_next article.id as article_next%}
        <a style="position: absolute;right: 25px;" href="/article/detail/{{article_next.pk}}">
            <p>{{article_next.title}} <span class="iconfont">&#xe7a8;</span></p>
        </a>
    </div>
</div>
<!-- 评论 -->
<div class="comment" id="comment-area">
    <div class="hint">
        <div class="pull-left">{% get_comment_count article.id as commentscount %}{{commentscount}}&#8197;评论</div>
        <div class="pull-right">
            {% if user.is_authenticated %}
            {{user.username}}
            {% else %}
            <a id="unauthenticated" href="/accounts/login/" target="view_window">未登录用户</a>
            {%endif%}
        </div>
    </div>
    <div class="Commentbox ">
        <div class="headsculpture">
            <img {% if user.is_authenticated %} src="{{user.avatar.url}}" {% else %} src="\media\avatar\default.png" {% endif %} />
        </div>
        <!-- form表单 -->
        <form method="POST" action="" novalidate='novalidate'>
            {% csrf_token %}
            <!-- form隐藏信息 -->
            <div class="comt-tips pull-right">
                <input type='hidden' name='comment_post_ID' value='{{ article.id }}' id='comment_post_ID' />
                <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                <input type='hidden' name='comment_author' value='{{ user.username }}' id='comment_author' />
            </div>
            <div class="ctextarea">
                <textarea class="form-control" rows="4" name="arciclecomment"></textarea>
            </div>
            <button id="arciclecommentb" type="button" class="btn btn-success">提交评论</button>
            <a href="https://guides.github.com/features/mastering-markdown/" class="iconfont" target="view_windown">&#xe615;支持Markdown</a>
        </form>
    </div>
    <!-- 评论区 -->
    <div class="Commentlist">
        <!-- 每个父级评论 -->
        {% get_parent_comments article.id as comments %}
        {% for comment in comments%}
        <div class="comments-item">
            <div class="pull-left">
                <img class="avatar-32" src="{{comment.author.avatar.url}}">
            </div>
            <div class="comments-content">
                <div class="comment-trigger">
                    <strong>{{comment.author.username}}</strong>
                    <span class="comments-isAuthor">·</span>
                    <span class="comments-date">{{comment.create_date | date:"Y-m-j"}}</span>
                </div>
                <div style="width: 100%">
                    <div id="markdown" class="commentsmd">
                        <!--django自定义模板语言，转为md-->
                        {% content_to_markdown comment.content as content%}
                        {{content |safe}}
                    </div>
                </div>
                <div class="comment-reply">
{#                    <a href="javascript:void(0);" class="glyphicon glyphicon-thumbs-up">&#8197;赞&nbsp;</a>#}
                    <a class="replyclick" href="javascript:void(0);">
                        <span class="iconfont">&#xe60e;</span>
                        回复</a>
                </div>
            </div>
            <div class="reply-form">
                <form class="replyform hidden" method="POST" novalidate='novalidate'>
                    <!-- form隐藏信息 -->
                    <div class="comt-tips pull-right">
                        <input type='hidden' name='comment_post_ID' value='{{ article.id }}' id='comment_post_ID' />
                        <input type='hidden' name='comment_author' value='{{ user.username }}' id='comment_author' />
                        <input type='hidden' name='comment_parent' id='comment_parent' value='{{comment.id}}' />
                        <input type='hidden' name='comment_rep' id='comment_rep' value='{{comment.id}}' />
                    </div>
                    <button class="btn btn-default pull-right usercommentb" type="button">添加回复</button>
                    <div class="form-group">
                        <textarea class="form-control replyinput" name="arciclecomment" rows="1" placeholder="回复"></textarea>
                    </div>
                </form>
            </div>
        </div>
        <!-- 子集评论 -->
        <div class="reply-list">
            {% get_child_comments comment.id as childcomments %}
            {% for childcomment in childcomments%}
            <!-- 每个子集评论 -->
            <div class="reply-item">

                <div class="reply-content">
                    <div id="markdown" class="repaymd">
                        {% content_to_markdown childcomment.content as content%}
                        {{content |safe}}
                    </div>
                    <div class="reply-trigger">

                        <span class="iconfont">&#xe629; <strong>{{childcomment.author.username}}</strong>&#8197;&#8197;回复&#8197;&#8197;<strong>{{childcomment.rep_to.author.username}}</strong></span>
                        <span class="comments-date">· {{childcomment.create_date| date:"Y-m-j"}}</span>
                        <a class="replyclick" href="javascript:void(0);">&#8197;
                            <span class="iconfont">&#xe60e;</span>回复</a>
                    </div>
                </div>
                <div class="reply-form">
                    <form class="replyform hidden" method="POST" novalidate='novalidate'>
                        <!-- form隐藏信息 -->
                        <div class="comt-tips pull-right">
                            <input type='hidden' name='comment_post_ID' value='{{ article.id }}' id='comment_post_ID' />
                            <input type='hidden' name='comment_author' value='{{ user.username }}' id='comment_author' />
                            <input type='hidden' name='comment_parent' id='comment_parent' value='{{comment.id}}' />
                            <input type='hidden' name='comment_rep' id='comment_rep' value='{{childcomment.id}}' />
                        </div>
                        <button class="btn btn-default pull-right usercommentb" type="button">添加回复</button>
                        <div class="form-group">
                            <textarea class="form-control replyinput" name="arciclecomment" rows="1" placeholder="回复"></textarea>
                        </div>
                    </form>
                </div>
            </div>
            {%endfor%}
        </div>
        {%endfor%}
    </div>
</div>
<!-- 打赏model -->
<div id="Reward" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title text-center" id="gridSystemModalLabel">赞赏博主</h4>
            </div>
            <div class="modal-body">
                <div class="text-center">您的支持是博主写作最大的动力，如果觉文章对您有帮助，请任意打赏</div>
                <div>
                    <img style="width: 100%" src="/static/images/pay.jpg">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 二维码model -->
<div id='Qrcode' class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <p class="text-center" style="margin: 15px 0;">打开微信“扫一扫”</p>
            <div class="Qrcodebg center-block">
            </div>
        </div>
    </div>
</div>
<!-- 侧边拦目录 -->
<div class="catalog hidden">
    <div>
        <span>目录</span>
        <p>
            {{ article.toc|safe }}
        </p>

        <a href="javascript:void(0);" class="top">返回顶部</a>
    </div>

</div>
{% endblock %}



{% block js %}
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript">

$('.top').on('click', function() {
            $('body,html').animate({ scrollTop: 0 }, 300);
});
/*———————————————————————————————目录——————————————————————————————————*/

var viewW = $(window).width();
if (viewW+17>=1200){
        var right=viewW*0.5-540;
        var Cright=right.toString()+'px';
        $(".catalog").removeClass('hidden').css({"right":Cright})
}
else if (viewW+17<1200&viewW+17>992){
        var right=viewW*0.5-440;
        var Cright=right.toString()+'px';
        $(".catalog").removeClass('hidden').css({"right":Cright})
}


jQuery(window).bind('scroll', function() {
    var scroH = $(document).scrollTop(); //滚动高度
    /*出现导航栏与回到顶部*/
    if (scroH  > 524) {
        $(".catalog").removeClass('hidden')
        /*hidden时需要延时设置属性才有过度效果*/
        setTimeout('$(".catalog").css({"opacity":"1"})',10)
    } else {
        $(".catalog").addClass('hidden').css({"opacity":"0"})
    }
});

jQuery(window).resize(function() {//实时
    var viewW = $(window).width();
    if (viewW+17>=1200){
        var right=viewW*0.5-540;
        var Cright=right.toString()+'px';
        $(".catalog").removeClass('hidden').css({"right":Cright})
    }
    else if (viewW+17<1200&viewW+17>992){
        var right=viewW*0.5-440;
        var Cright=right.toString()+'px';
        $(".catalog").removeClass('hidden').css({"right":Cright})
    }
    if (viewW+17<992){
        $(".catalog").addClass('hidden')
    }

});

/*———————————————————————————————二维码分享——————————————————————————————————*/
$('#Qrcode').on('shown.bs.modal', function(e) {
    $('#Qrcode .Qrcodebg').qrcode(window.location.href);
}).on('hidden.bs.modal', function(e) {
    $('#Qrcode').off('shown.bs.modal');
});
/*———————————————————————————————点赞——————————————————————————————————*/
$('.thumbupt').on('click', function() {
    if (document.body.contains(document.getElementById('unauthenticated'))) {
        var r = confirm("登录用户才能点赞");
        if (r == true) {
            window.open("/accounts/login/");
        };
    } else if ($('.thumbupt').children('small').html() == '已赞') {
        var r = confirm("已经赞过啦");
    }
    else {
        var likedata = $(this).children('form').serialize();
        $.ajax({
            url: '/comment/addlike/',
            type: 'POST',
            data: likedata,
            dataType: 'JSON',
            success: function(data) { //为什么不需要反序列化？？？？
                $('.thumbupt').children('small').html("已赞");
                $('.thumbupt').children('.loves').removeClass('loves').addClass('loveshave');
                $('.thumbupt').children('.lovecount').html(data.love);
            },
            error: function() { console.log("服务器错误，请重试"); }
        });
    };
});
/*———————————————————————————————提交回复——————————————————————————————————*/
$('.replyclick').on('click', function() {
    $("form[class='replyform']").addClass('hidden');
    $(this).parent().parent().siblings('.reply-form').children('form').removeClass('hidden');
});

$('.usercommentb').on('click', function() {
    //document.body.contains(element)判断是否存在标签返回布尔值
    if (document.body.contains(document.getElementById('unauthenticated'))) {
        var r = confirm("登录用户才能评论");
        if (r == true) {
            window.open("/accounts/login/");
        }
    } else {
        var arciclecomment = $(this).next().children('textarea').val();
        if (!arciclecomment) {
            alert("请输入内容")
        } else {
            var repdata = $(this).parent().serialize();
            console.log(repdata);
            $.ajax({
                url: '/comment/add/',
                type: 'POST',
                data: repdata,
                dataType: 'JSON', // data数据设置为字符串类型（Python后台需把字符串反序列化）
                success: function(data) {
                    //var obj = JSON.parse(data); // data数据单独设置为字符串类型，反序列化
                    $(this).parent().addClass('hidden');
                    location.reload();
                },
                error: function() { console.log("服务器错误，请重试"); }
            });
        }
    }
});

/*———————————————————————————————提交文章评论——————————————————————————————————*/
$('#arciclecommentb').on('click', function() {
    //document.body.contains(element)判断是否存在标签返回布尔值
    if (document.body.contains(document.getElementById('unauthenticated'))) {
        var r = confirm("登录用户才能评论");
        if (r == true) {
            window.open("/accounts/login/");
        }
    } else {
        var arciclecomment = $(this).parent('form').find("textarea").val();
        if (!arciclecomment) {
            alert("请输入内容")
        } else {
            //serialize()序列化表单
            data = $(this).parent('form').serialize()
            $.ajax({
                url: '/comment/add/',
                type: 'POST',
                data: data,
                dataType: 'JSON', // data数据设置为字符串类型（Python后台需把字符串反序列化）
                success: function(data) {
                    //var obj = JSON.parse(data); // data数据单独设置为字符串类型，反序列化
                    console.log(data);
                    location.reload();
                },
                error: function() { console.log("服务器错误，请重试"); }
            });
        }
    }

})
</script>
{% endblock %}